<template>
	<view class="packageCardRecordPage">
		<view class="withdrawalRecordsTop flex">
			<view class="search-content">

				<image class="search-img" src="../../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入套餐卡名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
			<image @click="openPicker()" class="timeImg" src="../../../static/会员卡管理端/path (2).png" mode=""></image>



		</view>
		<view style="padding: 10rpx  30rpx">

			<!-- <view class="flex-between margin-top_20rpx" style="color: rgb(153, 153, 153);">
				<text>累计订单金额：3632413.32</text>
				<text>累计订单笔数：363</text>
			</view> -->
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="padding_20rpx">
					<view class="packageCardList">
						<view class="flex-between padding-top_20rpx  padding-bottom_30rpx ">
							<view class="flex">
								<!-- <image class="image" src="../../../static/会员卡管理端/组合 309.png" mode=""></image> -->
								<view class="flex-columns-center margin-left_30rpx">
									<text class="font-weight_bold margin-bottom_10rpx"
										style="font-size: 30rpx;">{{item.nickname}}</text>

									<!-- <text style="color: rgb(153, 153, 153);;font-size: 24rpx;text-align: left;">手机号:{{item.phone}}
									</text> -->
								</view>
							</view>

							<view class="flex-column-end margin-left_30rpx  ">
								<text class="font-weight_bold margin-bottom_10rpx"
									style="font-size: 30rpx;color: rgb(255, 0, 0);">{{item.price}}</text>

								<text style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">购买金额
								</text>
							</view>

						</view>
						<view class="margin-bottom_20rpx " style="color: rgb(102, 102, 102);">
							<text>购买卡名：{{item.name}}</text>
						</view>
						<view class="margin-bottom_20rpx flex-between" style="color: rgb(102, 102, 102);">
							<text>剩余次数：{{item.num}}</text>
							<text>核销次数：{{item.use_num}} </text>
						</view>
						<view class="padding-bottom_20rpx border-bottom-ECECEC" style="color: rgb(102, 102, 102);">
							<text>充值时间：{{item.create_time}}</text>
						</view>
						<view class="flex-end margin-top_20rpx">
						<view class="verificationRecordsBtn flex margin-right_16rpx" @click="verificationFn(item)">
							选择打印机
						</view>
							<view class="verificationRecordsBtn flex margin-right_16rpx" @click="verificationRecordFn(item)">
								核销记录
							</view>
							
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定删除" content="放弃绑定银行卡表示不可使用银行卡进行支付"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改次数" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<term-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></term-picker>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				defaultDate: [currentDate, currentDate],
				tabIndex: 4,
				searchVal:undefined,
				msgType: 'success',
				downOption: {
					auto: true
				},
				pickerVisable:false,
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				form:{
					start_time:undefined,
					end_time:undefined
				}
			}
		},
	
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
			
				return `${year}-${month}-${day}`;
			
			},
			openPicker() {
				this.pickerVisable = true;
			},
			changeInput(e){
				console.log(e.detail.value)
				this.searchVal=e.detail.value
				this.$nextTick(()=>{
					this.mescroll?.resetUpScroll();
				})
			},
			confirm(e) {
				console.log('点击确定按钮，返回当前选择的值', e); // ['2021-06-01', '2021-07-01']
				console.log('打印所有的范围日期e', e);
			
				// this.startDate = e[0]+'-'+e[1];
				Object.assign(this.form, {
					start_time: e[0] + ' 00:00:00',
					end_time: e[1] + ' 23:59:59'
				});
				
			    this.$nextTick(()=>{
			    	this.mescroll?.resetUpScroll();
			    })
			
			},
			deleteFn() {


				this.$refs.alertDialog.open()

			},
			modifyFn() {
				this.$refs.inputDialog.open()
			},
			verificationRecordFn(item){
				this.$sun.navGo('/pages/packageManagement/verificationRecord/verificationRecord',{...item})
			},
			 verificationFn(item){
				 console.log(item)
				this.$sun.navGo('/pages/packageManagement/printersList/printersList',{...item,type:1})
			},
			async upCallback(scroll) {
			
				const result = await this.$http.post({
					url: this.$api.packageOrderList,
					data: {
						page: scroll.num,
						limit: 10,
						package_name:this.searchVal,
						...this.form
						
			
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
			
				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					
					this.list = this.list.concat(result.data.list);
					
					console.log('this.list', this.list, this.list.length);
				}
			},
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		
		onShow() {
			
			this.$nextTick(()=>{
				this.mescroll?.resetUpScroll();
			})
		
		},
	}
</script>

<style lang="less" scoped>
	.packageCardRecordPage {
		.packageCardList {
			.deleteBtn {
				width: 77px;
				height: 30px;
				box-sizing: content-box;
				border: 1px solid rgb(225, 225, 225);
				border-radius: 10px;
				font-size: 28rpx;
				background: rgb(255, 255, 255);
			}

			.verificationRecordsBtn {
				width: 77px;
				height: 30px;
				box-sizing: content-box;
				border: 1px solid rgb(225, 225, 225);
				border-radius: 10px;
				font-size: 28rpx;
				background: rgb(255, 255, 255);
			}

			.modifyBtn {
				border-radius: 20rpx;
				width: 77px;
				height: 30px;
				color: rgb(255, 255, 255);
				background: rgb(0, 124, 255);
			}

			.image {
				width: 88rpx;
				height: 88rpx;
			}


			padding: 20rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);
		}

		.withdrawalRecordsTop {

			background: rgb(255, 255, 255);

			padding: 34rpx;

			// border-radius: 130rpx;
			.timeImg {
				width: 40rpx;
				height: 40rpx;
				margin-left: 5rpx;
				margin-right: 15rpx;
			}

			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;
				margin-right: 24rpx;
				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;
				width: 100%;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>